<!--
 * @Author: your name
 * @Date: 2021-02-07 13:45:07
 * @LastEditTime: 2021-09-11 14:08:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jf-h5\src\page\main\index.vue
-->
<template>
  <div class="main">
    <div class="header">
      <img src="/static/img/logo.png" />
      <!-- <div class="lable">{{ titleLable }}</div> -->
    </div>
    <div class="scroll">
      <div class="scroll-view">
        <transition name="el-zoom-in-center">
          <router-view :key="$route.fullPath"></router-view>
        </transition>
      </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "./components/TabBar";
export default {
  data() {
    return {};
  },
  computed: {
    titleLable() {
      return this.$store.state.titleLable;
    }
  },
  watch: {
    "$route.path": {
      handler(nval) {
        const { table_name, isUrl } = this.$route.query;
        if (isUrl) {
          //回来点亮实时动态tabbar导航
          this.$store.commit("updateTitleLable", {
            title: "实时动态",
            index: 7
          });
          true;
        }
        if (table_name == "gong_cheng_guan_li_son") {
          this.$store.commit("updateTitleLable", {
            title: "工程管理",
            index: 1
          });
          return;
        }
        switch (nval) {
          case "/main/jbqk":
            this.$store.commit("updateTitleLable", {
              title: "基本情况",
              index: 0
            });
            break;
          case "/main/gcgl":
            this.$store.commit("updateTitleLable", {
              title: "工程管理",
              index: 1
            });
            break;
          case "/main/cwrz":
            this.$store.commit("updateTitleLable", {
              title: "财务融资",
              index: 2
            });
            break;
          case "/main/zdjs":
            this.$store.commit("updateTitleLable", {
              title: "职责制度",
              index: 3
            });
            break;
          case "/main/zcgl":
            this.$store.commit("updateTitleLable", {
              title: "资产管理",
              index: 4
            });
            break;
          case "/main/zbtb":
            this.$store.commit("updateTitleLable", {
              title: "招标投标",
              index: 5
            });
            break;
          case "/main/dflz":
            this.$store.commit("updateTitleLable", {
              title: "党风廉政",
              index: 6
            });
            break;
          case "/main/ssdt":
            this.$store.commit("updateTitleLable", {
              title: "实时动态",
              index: 7
            });
        }
      },
      immediate: true
    }
  },
  methods: {},
  components: {
    TabBar
  }
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  height: 100%;
  .header {
    height: 200px;
    background-color: #239ccb;
    background: url("~/static/img/main-top.jpg") no-repeat;
    background-size: 100% 100%;
    .lable {
      position: absolute;
      top: 170px;
      z-index: 99;
      left: 88px;
      width: 170px;
      height: 60px;
      background-color: #e4c488;
      border-radius: 10px;
      font-size: 27px;
      display: flex;
      justify-content: center;
      align-items: center;
      letter-spacing: 3px;
      font-weight: bold;
    }
    img {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 250px;
    }
  }

  .tabbar {
    position: absolute;
    bottom: 0;
  }

  .scroll {
    position: absolute;
    top: 200px;
    bottom: 160px;
    width: 100%;
    background: url("/static/img/main-back.png") no-repeat;
    overflow: auto;
    background-size: 100% 100%;
    // height: 400px;
    .scroll-view {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
